<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <script src="../js/jquery-1.4.2.js"></script>
    <script>
        $(function(){
            $("input").click(function(){
                //创建tr和5个td
                var tr = $("<tr></tr>");
                var nametd = $("<td></td>");
                var pricetd = $("<td></td>");
                var numtd = $("<td><input type='button' value='-' onclick='numfn(-1)'><span>1</span><input type='button' value='+' onclick='numfn(+1)'></td>");
                var moneytd = $("<td></td>");
                var deltd = $("<td><input type='button' value='删除'></td>");

                //给删除按钮添加点击事件
                deltd.children().click(function () {
                    //this 代表当前对象(删除按钮)  将按钮的爸爸的爸爸删除
                    $(this).parent().parent().remove();

                    //计算总价
                    calfn();
                });

               // 通过按钮找到上级td在得到所有兄弟里的第一个td
                var name = $(this).parent().siblings().eq(0).text();   //产品名称
              //  alert(name);
                var price = $(this).parent().siblings().eq(1).text();  // 价格
                nametd.text(name);
                pricetd.text(price);
                moneytd.text(price);
                //把td装进tr
                tr.append(nametd);
                tr.append(pricetd);
                tr.append(numtd);
                tr.append(moneytd);
                tr.append(deltd);
                //把tr装进table         加入购物车
                $("tr:last").before(tr);

                //计算总价
                calfn();
            });
        });


        //加减按钮的方法
        function numfn(x){
            //得到原来的数值
            var obj = event.target||event.srcElement;
            var count = parseInt($(obj).siblings("span").text());
            //计算
            count+=x;
            if(count<1){
                count=1;
            }
            //计算后的值放回去
            $(obj).siblings("span").text(count);

            //得到商品的单价
           var price = $(obj).parent().prev().text();
           //把计算后的值给到金额

            $(obj).parent().next().text(count*price);

            //计算总价
            calfn();
        }


        //计算总价的方法

        var total=0;
        function calfn(){
            $("table:last tr").each(function(){    //遍历
                //得到每一行一面的第四个孩子(td)
                var money = parseInt($(this).children().eq(3).text());
                if(!isNaN(money)){
                    total+=money;
                }
            });
            $("td:last").text("总价:"+total+"元");
        }
    </script>
    <style>
        h3{
            text-align:center;
        }
        table{
            width: 60%;
            margin: 0 auto;
            border: 1px solid black;
            /*将两条线合成一条线*/
            border-collapse: collapse;
            text-align:center;
        }
        td,th{
            border: 1px solid black;
            text-align:center;
        }
    </style>
</head>
<body>
    <h3>世界十大名表系列</h3>
<table>
        <tr>
            <th>商品名称</th>
            <th>单价</th>
            <th>库存</th>
            <th>好评率</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>百达翡丽(Patek Philippe)</td>
            <td>9990000</td>
            <td>100</td>
            <td>100%</td>
            <td><input type="button" value="加入购物车"></td>
         </tr>
         <tr>
            <td>爱彼(Audemars Piguet)</td>
            <td>9880000</td>
            <td>66</td>
            <td>92%</td>
            <td><input type="button" value="加入购物车"></td>
        </tr>
         <tr>
            <td>江诗丹顿(Vacheron Constantin)</td>
            <td>8990000</td>
            <td>10</td>
            <td>89%</td>
            <td><input type="button" value="加入购物车"></td>
         </tr>
         <tr>
            <td>伯爵(Piaget)</td>
            <td>8880000</td>
            <td>521</td>
            <td>98%</td>
            <td><input type="button" value="加入购物车"></td>
         </tr>
         <tr>
            <td>积家(Jaeger LeCoultre)</td>
            <td>7990000</td>
            <td>88</td>
            <td>89%</td>
            <td><input type="button" value="加入购物车"></td>
         </tr>
        <tr>
            <td>芝柏(Girard-Perregaux)</td>
            <td>789万</td>
            <td>100</td>
            <td>90%</td>
             <td><input type="button" value="加入购物车"></td>
        </tr>
        <tr>
            <td>劳力士(Rolex)</td>
            <td>12990000</td>
            <td>99</td>
            <td>100%</td>
            <td><input type="button" value="加入购物车"></td>
         </tr>
        <tr>
            <td>卡地亚(Cartier)</td>
            <td>7990000</td>
            <td>99</td>
            <td>99%</td>
            <td><input type="button" value="加入购物车"></td>
         </tr>
</table>
<h3>购物车</h3>
<table>
    <tr>
        <th>商品名称</th>
        <th>单价</th>
        <th>数量</th>
        <th>金额</th>
        <th>操作</th>
    </tr>
    <tr>
        <td colspan="5">总价:0元</td>
    </tr>
</table>
</body>
</html>